<script lang="ts" setup>
import {onMounted, ref} from "vue";
import BrandItem from "@/components/BrandItem.vue";
import axios from "axios";
import {useRoute} from "vue-router";

const searchText = ref('')
const brandList = ref([])

const searchPerfume = () => {

}
const indexPage = ref({
  size: 20,
  page: 1,
  total: 0,
  totalPage: 0
})

const topElement = ref(null);
const checkPage = () => {
  initData()
  // topElement.value.scrollIntoView({
  //   behavior: 'smooth',
  //   block: 'start'
  // });
  document.documentElement.scrollTop = 0;
}

const initData = () => {
  axios.post(`/api/brand/initList/${indexPage.value.page}/${indexPage.value.size}?name=${searchText.value}`)
      .then(res => {
        // console.log(res)
        const msg = res.data.message
        indexPage.value.total = msg.total
        indexPage.value.totalPage = (msg.total / 20) + 1
        // console.log((msg.total / 20) + 1)

        brandList.value = msg.list
        // console.log(brandList.value)
      })
}
const route = useRoute()

onMounted(() => {
  if (route.query.name) {
    searchText.value = route.query.name
  }
  initData()
})

</script>

<template>
  <div class="brand-main">
    <view ref="topElement"></view>
    <div class="brand-title">
      最受欢迎的品牌（{{ indexPage.total }}）
    </div>
    <div class="search-box">
      <q-input v-model="searchText" color="grey-6" label="搜索品牌..." outlined
               rounded style="width: 60vw" @keyup.enter="initData">
        <template v-slot:append>
          <q-icon name="search" @click="searchPerfume"/>
        </template>
      </q-input>
    </div>
    <div class="brand-list">
      <BrandItem v-for="(item,index) in brandList" :key="index"
                 :brand-id="item.brandId" :name="item.name" :perfume-size="item.perfumeSize"
      />
    </div>
    <div class="q-pa-lg flex flex-center">
      <q-pagination
          v-model="indexPage.page"
          :boundary-numbers="false"
          :max="indexPage.totalPage"
          :max-pages="6"
          direction-links
          @click="checkPage"
      />
    </div>

  </div>
</template>

<style lang="scss" scoped>
.brand-main {
  width: 100vw;

  .brand-title {
    margin-top: 4vh;
    margin-bottom: 2vh;
    font-size: 35px;
    text-align: center;
  }

  .search-box {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brand-list {
    margin-top: 2vw;
    width: 90vw;
    display: flex;
    flex-direction: column;
    margin-left: 5vw;
    margin-right: 5vw;
  }

}
</style>